@import './modules/reset.scss';
@import './modules/header.scss';

// mixin混合：定义样式片段
// 带参数默认值的
@mixin center ($px:1220px) {
   width: $px;

   margin: {
      left: auto;
      right: auto;
   }

   ;
}

body {
   background-color: #ededed;
}
.fly{
   width: 30px;
   height: 30px;
   border-radius: 50%;
}
main {
   @include center();
   margin-top: 30px;
   border-radius: 8px;
   border: 1px solid #dcdcdc;
   box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);
   box-sizing: border-box;
   display: flex;
   background-color: #ffffff;
}
#shopNum{
   width: 60px;
   height: 60px;
   position: fixed;
   // border: 1px solid;
   right: 0;
   top: 400px;
   img{
      width: 50px;
      height: 50px;
   }
   span{
      position: absolute;
      width: 15px;
      height: 15px;
      font-size: 14px;
      // background-color: lightcoral;
      left: 0;
      text-align: center;
      border-radius: 50%;
      top: 50%;
      margin-top: -7px;
      left: 50%;
      margin-left: -13px;
      font-weight: 600;
   }
}
.left {
   box-sizing: border-box;
   // background-color: royalblue;
   width: 50%;
   position: relative;

   .bigPic {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto 0;
      width: 400px;
      height: 400px;
      // border: 1px solid;
      .mask {
         width: 200px;
         height: 200px;
         position: absolute;
         left: 0;
         top: 0;
         background-color: rgba(#aaaaaa, .5);
         z-index: 5;
         display: none;
      }

      img {
         position: absolute;
         width: 400px;
         height: 400px;
      }
   }

   .smallPic {
      box-sizing: border-box;
      position: absolute;
      width: 90px;
      height: 500px;
      z-index: 2;
      left: 40px;
      top: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      li {
         cursor: pointer;
         width: 80px;
         height: 80px;
         border: 1px solid rgba(0, 0, 0, .4);
         overflow: hidden;
         border-radius: 5px;
         box-sizing: border-box;
         position: relative;
         img{
            width: 54px;
            height: 54px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
         }
      }

      .click {
         border: 3px solid #999999;
         box-sizing: border-box;
      }
   }

   .bestPic {
      position: absolute;
      // right: -530px;
      right: -410px;
      top: 20px;
      // border: 1px solid;
      display: none;
      z-index: 5;
      background-color: lightblue;
      width: 400px;
      height: 400px;
      overflow: hidden;
      img{
         position: absolute;
         width: 800px;
         height: 800px;
      }
   }
}

.right {
   width: 50%;
   height: 570px;
   box-sizing: border-box;
   padding: 40px 35px;

   ul {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      li {
         width: 100%;
         // height: 60px;
         display: flex;
         line-height: 28px;
         padding-bottom: 25px;
         
         border-bottom: 1px solid rgba(0, 0, 0, .08);
      }
    

      .one {
         position: relative;
         h2 {
            font-size: 24px;
            margin-top: -30px;
            font-weight: 400;
            color: #000;
         }

         p {
            margin-top: 20px;
            font-size: 14px;
            color: #999;
            font-size: 14px;
         }

         h3 {
            position: absolute;
            right: 0;
            color: #d44d44;
            font-weight: 700;
            font-size: 24px;
         }

         del {
            padding-left: 80px;
            font-size: 16px;
            color: #bdbdbd;
            font-weight: 400;
            font-size: 14px;
         }
      }

      h4 {
         position: relative;
         width: 85px;
         height: 28px;
         line-height: 28px;
         color: #666;
         font-size: 15px;
         float: left;
         font-weight: normal;
      }
      .colorSelect{
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         // justify-content: space-between;
         // background-color: skyblue;
         margin-left: 60px;
      }
      .colorText{
         margin-top: 8px;
         // background-color: skyblue;
         // width: 110px;
         // width: 20px;
         position: absolute;
      }
      .littleBox {
         display: inline-block;
         width: 40px;
         height: 20px;
         background: #fffbe5;
         border: 1px solid #ffe57a;
         color: #e6b217;
         text-align: center;
         line-height: 20px;
         margin-top: 2px;
         font-size: 12px;
         border-radius: 13px;
         margin-right: 20px;
         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05);
      }

      p {
         color: gray;
         display: inline-block;
         font-size: 12px;
      }

      .btn {
         display: inline-block;
         width: 30px;
         height: 30px;
         border: 2px solid #e5e5e5;
         border-radius: 50%;
         margin-left: 20px;
         cursor: pointer;
         overflow: hidden;
         text-align: center;
         img{
            width: 24px;
            height: 24px;
            border-radius: 50%;
            // margin-top: 5px;
            margin-top: 3px;
         }
      }
      .btn-text{
         width: 96px;
         height: 46px;
         border: 1px solid #e5e5e5;
         border-radius: 6px;
         cursor: pointer;
         font-size: 14px;
         box-sizing: border-box;
         padding: 0 20px;
         margin-top: -10px;
         line-height: 46px;
         color: #323232;
         font-size: 18px;
         margin-top: 8px;
      }
      .click {
         // border-radius: 0;
         border: 2px solid red;

      }
      .btn1 {
         display: inline-block;
         background-color: #fdfdfd;
         border: 1px solid #f1f1f1;
         width: 20px;
         height: 20px;
         line-height: 20px;
         border-radius: 50%;
         font-size: 15px;
         color: #686565;
         text-align: center;
         box-shadow: 2px 2px 5px #aaaaaa;
         cursor: pointer;

         &:hover {
            background-color: skyblue;
            box-shadow: 2px 2px 5px darkblue;
            border: 1px solid skyblue;
         }
      }

      .num {
         width: 50px;
         height: 18px;
         border: none;
         border-radius: 3px;
         line-height: 28px;
         text-align: center;
         font-size: 14px;
         padding: 0;
         padding-top: 4px;
         background-color: transparent;
         font-weight: 700;
         color: #626262;
      }
   }
}
.longImg{
   @include center();
   // height: 500px;
   background-color: white;
   margin-top: 25px;
   border-radius: 8px;
   position: relative;
   img{
      // position: absolute;
      width: 100%;
     display: block;
     margin: 0 auto;
   }
   &-top{
      width: 100%;
      position: relative;
      z-index: 10;
      height: 60px;
      box-sizing: border-box;
      padding: 0 10px 0 24px;
      border-bottom: 1px solid #d4d4d4;
      border-radius: 8px 8px 0 0;
      box-shadow: 0 1px 7px rgba(0,0,0,.06);
      background: #f3f3f3;
      background: linear-gradient(#fbfbfb,#ececec);
      line-height: 60px;
      font-size: 18px;
      color: #333;
         h2{
         color: #666;
         font-weight: 400;
         font-size: 18px;
         }
         
   }
}
footer {
   width: 100%;
   height: 60px;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: #fafafa;
   border-top: 1px solid #e3e3e3;
   box-shadow: 0 -1px 3px rgba(0, 0, 0, .04);
   z-index: 25;

   .center {
      @include center();
      height: 60px;

      &-left {
         float: left;
         padding-top: 10px;
         margin-top: -8px;
         p {
            display: inline-block;
            font-size: 13px;
            color: #9f9f9f;
            margin-right: 20px;
            margin-top: 12px;
         }

         .title {
            font-size: 14px;
            color: #707070;
            font-weight: 700;
         }

         .num {
            font-size: 14px;
            color: #707070;
            font-weight: 700;
         }

         .color {
            display: block;
            margin-left: 85px;
            margin-top: 5px;
            font-size: 12px;
            color: #9d9d9d;
            
         }
      }

      &-right {
         float: right;
         padding-top: 10px;
         position: relative;
         height: 50px;

         .price {
            font-size: 20px;
            font-weight: 700;
            color: #d44d44;
            margin-right: 30px;
         }

         del {
            position: absolute;
            bottom: 5px;
            left: 25px;
            font-size: 12px;
            color: #9d9d9d;
         }

         button{
            width: 120px;
            height: 40px;
            border: none;
            border: 1px solid #dedede;
            font-size: 14px;
            border-radius: 6px;
            cursor: pointer;
         }
         .buy{
            background-color: #f8f8f8;
            background-image: linear-gradient(#fbfbfb,#f5f5f5);
            margin-right: 10px;
            color: #646464;
            font-weight: 700;
            &:hover{
               color: #5e5e5e;
               background-color: #ececec;
               background-image: linear-gradient(#e2e2e2,#ededed);
            }
         }
         .goBuyShop{
            color: #fff;
            background-color: #6383c6;
            background-image: linear-gradient(#6383c6,#4262af);
            &:hover{
           
               background-image: linear-gradient(#4262af,#4262af);
            }
         }
      }
   }
}